/**
 * @Title: line-charts.js
 * @Description: line-charts
 * @author: Fanchao
 * @date: 2020/8/2 7:09 下午
 * @version V1.0
 */
import React from 'react';
import Echarts from 'echarts-for-react';

class LineCharts extends React.Component {
    constructor(props) {
        super(props);

        const lineData = this.props.lineData;
        const xData = lineData.map(item => {
            return item.evaluateInfo;
        });
        const yData = lineData.map(item => {
            // return item.evaluateResult;
            if (item.evaluateResult === '优秀') {
                return 100;
            } else if (item.evaluateResult === '良好') {
                return 80;
            } else if (item.evaluateResult === '合格') {
                return 60;
            } else if (item.evaluateResult === '不合格') {
                return 40;
            }
        });
        const option = {
            color: ['#105F92'],
            tooltip: {
                trigger: 'axis',
                formatter: function(params, ticket, callback) {
                    const data = params[0];
                    const value = data.value;
                    const name = data.axisValue;
                    let valueName = '';
                    if (value === 100) {
                        valueName = '优秀';
                    } else if (value === 80) {
                        valueName = '良好';
                    } else if (value === 60) {
                        valueName = '合格';
                    } else if (value === 40) {
                        valueName = '不合格';
                    }
                    const showHtm = name + '<br>' + ' 成绩：' + valueName;
                    return showHtm;
                },
            },
            calculable: true,
            dataZoom: {
                show: true,
                realtime: true,
                // start : 20,
                // end : 80 //百分比
                // startValue: '2010第一学期', 	//拖拽条开始时间
                // endValue: '2020第二学期',			//拖拽条结束时间
                startValue: xData[0], 	//拖拽条开始时间
                endValue: xData[xData.length - 1],			//拖拽条结束时间
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: xData,
                },
            ],
            yAxis: {
                type: 'value',
                max: 100,
                min: 40,
                scale: true,
                axisLabel: {
                    formatter: function(value, index) {
                        if (value === 100) {
                            return '优秀';
                        } else if (value === 80) {
                            return '良好';
                        } else if (value === 60) {
                            return '合格';
                        } else if (value === 40) {
                            return '不合格';
                        }
                    },
                },
                axisPointer: {
                    snap: true,
                },
            },
            series: [
                {
                    name: name,
                    type: 'line',
                    data: yData,
                },
            ],
        };

        this.state = {
            option,
        };
    }


    render() {
        return (
            <div>
                <Echarts
                    option={this.state.option}
                    style={{ height: 400 }}
                />
            </div>
        );
    }
}

export default LineCharts;
